<template>
	<view>
		<view class="u-flex user-box u-p-t-20 u-p-l-30 u-p-r-20 u-p-b-20">
			<view class="u-m-r-10">
				<u-avatar
					v-if="hasUserInfo"
					:src="userInfo.avatarUrl"
					size="130"
				></u-avatar>
				<u-avatar v-else :src="defaultAvatar" size="130"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-l-20 u-p-b-20" v-if="hasUserInfo">
					{{ userInfo.nickName }}
				</view>
				<block v-else>
					<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
					<button
						class="getUserInfo-btn u-font-18 u-p-l-20 u-p-b-20"
						open-type="getUserInfo"
						@getuserinfo="getUserInfo"
					>
						Hi，您未登录
					</button>
					<!-- #endif -->
				</block>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item
					icon="heart-fill"
					title="喜欢"
					@click="itemClick"
				></u-cell-item>
				<u-cell-item
					icon="download"
					title="下载"
					@click="itemClick"
				></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item
					icon="rmb-circle"
					title="赞赏码"
					@click="appreciateShow"
				></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<button class="advise-btn" open-type="feedback">
					<u-cell-item icon="kefu-ermai" title="意见反馈"></u-cell-item>
				</button>
				<u-cell-item
					icon="setting"
					title="设置"
					@click="itemClick"
				></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			defaultAvatar: require('../../static/default-avatar.svg'),
			hasUserInfo: false,
			userInfo: {}
		};
	},
	onLoad() {},
	onShow() {
		const that = this;
		uni.getStorage({
			key: 'userInfo',
			success(res) {
				console.log('getStorage成功', res);
				that.hasUserInfo = true;
				that.userInfo = res.data;
			},
			fail(err) {
				console.log('getStorage失败', err);
				that.hasUserInfo = false;
				that.userInfo = {};
			}
		});
	},
	methods: {
		// 赞赏码
		appreciateShow() {
			uni.previewImage({
				urls: [
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-encountermm-mzitu/cf15f570-c580-11ea-9dfb-6da8e309e0d8.jpg'
				],
				current: 0
			});
		},
		itemClick() {
			uni.showToast({
				title: '正在开发中，敬请期待...',
				icon: 'none'
			});
		},
		getUserInfo(result) {
			if (result.detail.errMsg !== 'getUserInfo:ok') {
				uni.showModal({
					title: '获取用户信息失败',
					showCancel: false
				});
				return;
			}
			const userInfo = result.detail.userInfo;
			uni.setStorageSync('userInfo', userInfo);
			this.hasUserInfo = true;
			this.userInfo = userInfo;
			this.login();
		},
		login() {
			uni.showLoading({
				title: '登录中...',
				mask: true
			});
			const uniLogin = new Promise((resolve, reject) => {
				uni.login({
					provider: 'weixin',
					success(res) {
						resolve(res.code);
					},
					fail(err) {
						reject(err);
					}
				});
			});
			uniLogin
				.then(code => {
					console.log(code)
					return uniCloud.callFunction({
						name: 'login',
						data: {
							code
						}
					});
				})
				.then(res => {
					uni.hideLoading();
					if (res.result.code === 0) {
						const { openid, platform } = res.result.data;
						uniCloud
							.callFunction({
								name: 'addUser',
								data: {
									openid,
									platform,
									...this.userInfo
								}
							})
							.then(res => {
								if (res.result.code === 0) {
									const { id } = res.result.data;
									uni.setStorageSync('userId', id);
									console.log('添加成功', res);
								} else {
									uni.showToast({
										title: '服务器错误',
										icon: 'none'
									});
								}
							});
					} else {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						});
					}
				})
				.catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.message || '登录失败',
						icon: 'none'
					});
				});
		}
	}
};
</script>
<style lang="scss">
.user-box {
	background-color: #fff;
}
.getUserInfo-btn {
	background: #fff;
	display: inline;
}
.advise-btn {
	padding: 0;
	background: #fff;
}
.getUserInfo-btn:after {
	content: ' ';
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border: none !important;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	box-sizing: border-box;
	border-radius: 10px;
}
.u-cell_title {
	margin-left: 20rpx !important;
}
</style>
